<template>
  <div id="form-analysis">
    <v-header title="表单分析"></v-header>
    <!---------------------------------------------------------首页面--------------------------------------------------------->
    <div class="formanalysis" v-show="toggleValue === 'index'">
      <div class="forms-data">
        <div class="form">
          <!-----------------------常用----------------------->
          <el-row>
            <el-col :span="20">
              <div class="grid-content bg-purple-dark">
                <v-pageHeader :InquireTransCode="InquireTransCode" :setTransCode="setTransCode" num="06"
                              :delTransCode="delTransCode" @on-commUsed="commUsed" itemKey="anal_id"
                              itemValue="anal_name"></v-pageHeader>
              </div>
            </el-col>
          </el-row>
          <!------------------------------------------------->
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple-dark">
                <span class="formfiltertitle">表单筛选</span>
                <el-select placeholder="请选择" v-model='value' size="mini" class="width160"></el-select>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="6" v-for="(formitem, index) in formitems.domains" :key="formitem.id">
            <el-col :span="3.5">
              <div class="grid-content bg-purple">
                <span class="grid-content-title">属性</span>
                <el-select placeholder="请选择" v-model='value' size="mini" class="width160"></el-select>
              </div>
            </el-col>
            <el-col :span="1.5">
              <div class="grid-content bg-purple">
                <el-select placeholder="请选择" v-model='value' size="mini" class="width100"></el-select>
              </div>
            </el-col>
            <el-col :span="1.5">
              <div class="grid-content bg-purple">
                <el-select placeholder="请选择" v-model='value' size="mini" class="width160"></el-select>
              </div>
            </el-col>
            <el-col :span="1.5">
              <i class="el-icon-plus" @click="addAttributes"></i>
              <i v-if="index !== 0" class="el-icon-close" @click="closeAttributes(formitem)"></i>
            </el-col>
          </el-row>
        </div>
        <div class="examine">
          <div class="btns rf">
            <el-button type="primary" size="mini" @click="check">查看</el-button>
            <el-button size="mini">重置</el-button>
          </div>
        </div>
      </div>
      <div class="forms-content">
        <div class="block">
          <el-date-picker
            v-model="value6"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <span class="Contrast-time">对比时间</span>
          <el-date-picker
            class="border-none"
            v-model="value7"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="total">
          <span>
            <div class="total-data">
              <div>访问人数</div>
              <div>3213</div>
            </div>
          </span>
          <span>
            <div class="total-data">
              <div>填写人数</div>
              <div>295</div>
            </div>
          </span>
          <span>
            <div class="total-data">
              <div>填写完成人数</div>
              <div>210</div>
            </div>
          </span>
        </div>
        <div class="forms-nav">
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label" class="nav-data">
                <div>表单转化率  6.01%</div>
                <div>123</div>
                <!--<div>123</div>-->
              </span>
              <Vechart class="formechart"></Vechart>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="nav-data">
                <div>表单放弃率 6%</div>
                <div>123</div>
                <!--<div>123</div>-->
              </span>
              表单放弃率 6%
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="nav-data">
                <div>表单填写时长  0分40秒</div>
                <div>123</div>
                <!--<div>123</div>-->
              </span>
              表单填写时长  0分40秒
            </el-tab-pane>
            <el-tab-pane>
              <span class="nav-data" slot="label">
                <div>平均空白字段1个</div>
                <div>123</div>
                <!--<div>123</div>-->
              </span>
              平均空白字段1个
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="nav-data">
                <div>表单重填率 35%</div>
                <div>123</div>
                <!--<div>123</div>-->
              </span>
              表单重填率 35%
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- ------------------------------------------表单分类表格------------------------------------------ -->
    <div v-show="toggleValue === 'formsortlist'">
      <formsortlist></formsortlist>
    </div>
    <!-- -------------------------------类型表单------------------------------- -->
    <div v-show="toggleValue === 'formtypelist'">
      <formtypelist></formtypelist>
    </div>
    <!-- -------------------------------表单详查------------------------------- -->
    <div v-show="toggleValue === 'formdetailcheck'">
      <formdetailcheck></formdetailcheck>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {VHeader, VPageHeader} from '../../../../components'
  import Vechart from './comm/tablegraphdata'
  import store from '@/store'
  import formtypelist from './comm/formtypelist'
  import formdetailcheck from './comm/formdetailcheck'
  import formsortlist from './comm/formsortlist'
  import api from '../../../../api/url'
  export default {
    name: 'formAnalysis',
    components: {
      VHeader,
      VPageHeader,
      Vechart,
      formtypelist,
      formdetailcheck,
      formsortlist
    },
    data () {
      return {
        value6: '',
        value7: '',
        value: '',
        formitems: {
          domains: [{
          }]
        },
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL // 删除常用
      }
    },
    computed: {
      toggleValue: () => {
        return store.state.toggleValue
      }
    },
    methods: {
      addAttributes () {
        this.formitems.domains.push({
        })
      },
      closeAttributes (formitem) {
        var i = this.formitems.domains.indexOf(formitem)
        this.formitems.domains.splice(i, 1)
      },
      commUsed () {},
      check () {
        store.commit('updateToggleValue', 'formsortlist')
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  #form-analysis
    height 100%
    .formanalysis
      height 100%
      overflow-y auto
      overflow-x hidden
    .form
      padding 10px 0 10px 20px
      color #5A5E66
      font-size 12px
    .Contrast-time
      color  #B4BCCC
      font-size 12px
      margin-left 20px
    .border-none
      border none!important
    .el-tabs--border-card
      border none!important
    .el-row
      margin-bottom 20px
        margin-bottom 0
    .el-col
      border-radius 4px
    .grid-content
      border-radius 4px
      min-height 36px
    .row-bg
      padding 10px 0
    .formfiltertitle, .grid-content-title
      display inline-block
      width 80px
    .forms-data
      background-color #ffffff
      margin 10px 0 0 10px
    .forms-content
      margin 10px 0 0 10px
      background-color #ffffff
    .block
      width 100%
      height 60px
      padding 20px 0 80px 20px
    .total
      width 100%
      height 80px
    .total span
      width 33.3%
      height 60px
      display block
      float left
      border none
      border-right 1px solid #D8DCE5
    .total-data
      height 50px
      margin-left 20px
    .total-data :nth-child(1)
      color #B4BCCC
      font-size 12px
    .total-data :nth-child(2)
      color #333333
      font-size 20px
    .forms-nav
      width 100%
    .formechart
      width 100%
      margin 0 auto
      .echarts
        width 700px
        height 500px
        .echarts > div
          width 700px
          height 500px
          .echarts > div > canvas
            width 700px
            height 500px
    .el-tabs__nav
      width 100%!important
      height 100px
    .el-tabs__item
      width 20%!important
      height 80px
    .el-range-input
      width: 35%!important
    .el-input__inner
      height 30px!important
      font-size 12px
    .el-range-separator
      width: 10%!important
    .nav-data div
      width 100px
      height 30px
      margin 0 auto
      text-align center!important
    .nav-data :nth-child(1)
      font-size 14px
      color #333333
    .nav-data :nth-child(2)
      font-size 20px
      color #016DFB
    .nav-data :nth-child(3)
      font-size 12px
      color #B4BCCC
    .el-tabs__item.is-active
      height 100px
    .examine
      height 50px
      line-height 30px
      padding 0 20px 20px 0
      margin-top 30px
      .btns
        width 150px
        .el-button
          display inline-block
          width 65px
          height 30px
    .el-icon-plus
      color #016DFB
    .el-icon-close
      color #D8DCE5
</style>
